import 'package:dio/dio.dart';
import 'package:enjoy_life/utils/NetworkService.dart';
import 'package:enjoy_life/utils/Toast.dart';
import 'package:enjoy_life/utils/Validate.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class HouseForm extends StatefulWidget {
  HouseForm({super.key, required this.houseInfo});

  Map houseInfo;
  @override
  State<HouseForm> createState() => _HouseFormState();
}

class _HouseFormState extends State<HouseForm> {
  final Map _formData = {
    'point': '', // 小区信息
    'building': '', // 小区楼栋信息
    'room': '', // 小区房间信息
    'name': '', // 业主姓名
    'gender': 1, // 业主性别 0女 1男
    'mobile': '', // 业主电话
    'idcardFrontUrl': '', // 身份证正面
    'idcardBackUrl': '', // 身份证背面
  };

  // 姓名
  final TextEditingController _nameController = TextEditingController();
  // 手机号
  final TextEditingController _mobileController = TextEditingController();

  Future<void> submitForm() async {
    // 校验姓名
    String name = _nameController.text;
    if (!Validate.validateName(name)) return;

    // 校验手机号
    String mobile = _mobileController.text;
    if (!Validate.validatePhone(mobile)) return;

    setState(() {
      _formData['name'] = name;
      _formData['mobile'] = mobile;
    });

    // 校验身份证
    if (!Validate.validateIdCard(
        _formData['idcardFrontUrl'], _formData['idcardBackUrl'])) {
      return;
    }

    if (_formData.containsKey('id')) {
      _formData.remove('status');
    }

    try {
      var res = await http.post('/room', data: _formData);
      if (res['code'] != 10000) return CustomToast.error('提交失败');
      CustomToast.success('提交成功');
      Navigator.popUntil(context, (route) {
        print(route.settings.name);
        return route.settings.name == '/';
      });
    } catch (e) {
      CustomToast.error('网络异常');
    }
  }

  @override
  void initState() {
    super.initState();
    setState(() {
      _formData.addAll(widget.houseInfo);
      _nameController.text = _formData['name'];
      _mobileController.text = _formData['mobile'];
    });
  }

  //  底部弹窗
  void showBottomSheet(String tag) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return SizedBox(
              height: 200,
              width: MediaQuery.of(context).size.width,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ListTile(
                      leading: const Icon(Icons.camera_alt),
                      title: const Text('拍照'),
                      trailing: const Icon(Icons.arrow_forward_ios_sharp),
                      onTap: () async {
                        final ImagePicker picker = ImagePicker();
                        final XFile? photo =
                            await picker.pickImage(source: ImageSource.camera);

                        // 关闭弹窗
                        Navigator.pop(context);
                        if (photo != null) {
                          updateImage(tag, photo.path);
                        }
                      },
                    ),
                    ListTile(
                      leading: const Icon(Icons.photo),
                      title: const Text('相册'),
                      trailing: const Icon(Icons.arrow_forward_ios_sharp),
                      onTap: () async {
                        final ImagePicker picker = ImagePicker();
                        final XFile? image =
                            await picker.pickImage(source: ImageSource.gallery);

                        // 关闭弹窗
                        Navigator.pop(context);
                        if (image != null) {
                          updateImage(tag, image.path);
                        }
                      },
                    )
                  ]));
        });
  }

  // 上传图片
  Future<void> updateImage(String tag, String imagePath) async {
    try {
      // 1.包装数据
      FormData formData = FormData.fromMap({
        "file": await MultipartFile.fromFile(imagePath),
        "type": "avatar",
      });
      var res = await http.post('/upload', data: formData);
      if (res['code'] != 10000) return CustomToast.error('上传图片失败');
      setState(() {
        _formData[tag] = res['data']['url'];
        CustomToast.success('上传图片成功');
      });
    } catch (e) {
      CustomToast.error('上传图片失败');
    }
  }

  Widget _buildAddIdcardPhoto(String tag, String info) {
    return GestureDetector(
      onTap: () {
        showBottomSheet(tag);
      },
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(Icons.add, size: 30, color: Color.fromARGB(255, 85, 145, 175)),
            Text(
              info,
              style: TextStyle(color: Color.fromARGB(255, 85, 145, 175)),
            ),
          ]),
    );
  }

  Widget _buildIdcardPhoto(String tag, String photoUrl) {
    return Stack(children: [
      SizedBox(
          width: MediaQuery.of(context).size.width - 20,
          height: 300,
          child: Image.network(photoUrl, fit: BoxFit.contain)),
      Positioned(
          right: 0,
          top: 0,
          child: GestureDetector(
            child: const Icon(Icons.delete, color: Colors.red),
            onTap: () {
              setState(() {
                _formData[tag] = '';
              });
            },
          ))
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('${_formData.containsKey('id') ? '修改' : '添加'}房屋信息'),
          backgroundColor: Colors.transparent,
          centerTitle: true,
        ),
        body: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            ListView(
                padding: const EdgeInsets.only(top: 10, bottom: 10),
                children: [
                  // 房屋信息
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: const Text('房屋信息',
                        style: TextStyle(
                            color: Color.fromARGB(255, 97, 94, 94),
                            fontSize: 16)),
                  ),
                  Container(
                    color: Colors.white,
                    padding: const EdgeInsets.only(
                        left: 10, right: 10, top: 15, bottom: 15),
                    child: Text(
                        '${_formData['point']} ${_formData['building']}${_formData['room']}室'),
                  ),
                  // 业主信息
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: const Text('业主信息',
                        style: TextStyle(
                            color: Color.fromARGB(255, 97, 94, 94),
                            fontSize: 16)),
                  ),
                  // 业主姓名
                  Container(
                    color: Colors.white,
                    padding: const EdgeInsets.only(left: 10, right: 10),
                    child: TextField(
                      controller: _nameController,
                      maxLength: 15,
                      decoration: const InputDecoration(
                        labelText: '姓名',
                        hintText: '请输入业主姓名',
                        hintStyle: TextStyle(color: Colors.grey),
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  // 性别
                  Container(
                      color: Colors.white,
                      padding: const EdgeInsets.only(left: 10, right: 10),
                      child: Row(children: [
                        const Text(
                          '性别',
                          style: TextStyle(fontSize: 16),
                        ),
                        const SizedBox(width: 20),
                        Radio(
                          value: 1,
                          groupValue: _formData['gender'],
                          onChanged: (value) {
                            setState(() {
                              _formData['gender'] = value ?? '';
                            });
                          },
                        ),
                        const Text('男'),
                        const SizedBox(width: 10),
                        Radio(
                          value: 0,
                          groupValue: _formData['gender'],
                          onChanged: (value) {
                            setState(() {
                              _formData['gender'] = value ?? '';
                            });
                          },
                        ),
                        const Text('女'),
                      ])),
                  // 业主手机号
                  Container(
                    color: Colors.white,
                    padding: const EdgeInsets.only(left: 10, right: 10),
                    child: TextField(
                      controller: _mobileController,
                      keyboardType: TextInputType.phone,
                      maxLength: 11,
                      decoration: const InputDecoration(
                        labelText: '手机号',
                        hintText: '请输入您的手机号',
                        hintStyle: TextStyle(color: Colors.grey),
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  // 业主信息
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: const Text('本人身份证照片',
                        style: TextStyle(
                            color: Color.fromARGB(255, 97, 94, 94),
                            fontSize: 16)),
                  ),
                  Container(
                    padding:
                        const EdgeInsets.only(left: 10, right: 10, bottom: 10),
                    child: const Text('请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。',
                        style: TextStyle(
                            color: Color.fromARGB(255, 97, 94, 94),
                            fontSize: 12)),
                  ),
                  // 身份证正面
                  Container(
                      color: Colors.white,
                      height: 320,
                      padding: const EdgeInsets.all(10),
                      child: _formData['idcardFrontUrl'] == ''
                          ? _buildAddIdcardPhoto('idcardFrontUrl', '上传人像面照片')
                          : _buildIdcardPhoto(
                              'idcardFrontUrl', _formData['idcardFrontUrl'])),
                  const SizedBox(height: 20),
                  // 身份证反面
                  Container(
                      color: Colors.white,
                      height: 320,
                      padding: const EdgeInsets.all(10),
                      child: _formData['idcardBackUrl'] == ''
                          ? _buildAddIdcardPhoto('idcardBackUrl', '上传国徽面照片')
                          : _buildIdcardPhoto(
                              'idcardBackUrl', _formData['idcardBackUrl'])),
                ]),
            const SizedBox(height: 20),
            // 提交审核
            Container(
                padding: const EdgeInsets.all(10),
                color: Colors.white,
                height: 80,
                width: MediaQuery.of(context).size.width,
                child: Row(
                  children: [
                    Expanded(
                        flex: 1,
                        child: ElevatedButton(
                            onPressed: () {
                              // 提交审核
                              submitForm();
                            },
                            child: const Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                // SizedBox(height: 8),/
                                Icon(Icons.exit_to_app),
                                Text('提交审核'),
                                // SizedBox(height: 8)
                              ],
                            )))
                  ],
                )),
          ],
        ));
  }
}
